<script setup lang="ts" name="Spu">
import CategoryList from '@/components/CategoryList.vue';
import MyQTable from '@/components/MyQTable.vue';
import { reqGetSpuList, reqDeleteSpu } from '@/api/product/spu.ts';
import type { Category, SpuInfo } from '@/api/product/type.ts';
import { ref, computed } from 'vue';
import type { QTableColumn } from 'quasar';
import { useQuasar } from 'quasar';
import SpuFormCard from './components/SpuFormCard.vue';
import SkuListDialog from './components/SkuListDialog.vue';
import SkuFormCard from './components/SkuFormCard.vue';
import { useCompRef } from '@/utils/useCompRef';
import { useRemoveItem } from '@/hooks/useRemoveItem.ts';

const $q = useQuasar();
// spu列表
const spuList = ref<SpuInfo[]>([]);
// 表格列
const columns: QTableColumn[] = [
  {
    name: 'index',
    label: '序号',
    field: '',
    align: 'center',
    style: 'width: 80px'
  },
  { name: 'spuName', label: 'SPU名称', field: 'spuName', align: 'left' },
  {
    name: 'description',
    label: 'SPU描述',
    field: 'description',
    align: 'left'
  },
  { name: 'control', label: 'SPU操作', field: 'id', align: 'left' }
];
// categoryId
const categoryId = ref<Category>();
const category3Id = ref<number>();
//  分页信息
const pagination = ref({
  page: 1, // 当前页数
  rowsPerPage: 5, // 每页数据个数
  rowsNumber: 0, // 总数
  sortBy: '',
  descending: false
});
// loading
const loading = ref(false);
// 获取categoryId
const getCategoryId = (category: Category | undefined) => {
  if (category) {
    categoryId.value = category;
    category3Id.value = category.category3Id;
    getSpuList();
  } else {
    category3Id.value = undefined;
    spuList.value = [];
  }
};
// 获取分页信息
const getPaginationInfo = (page: number, rowsPerPage: number) => {
  pagination.value.page = page;
  pagination.value.rowsPerPage = rowsPerPage;
  getSpuList();
};
// 获取spu列表
const getSpuList = async () => {
  loading.value = true;
  try {
    const res = await reqGetSpuList({
      page: pagination.value.page,
      limit: pagination.value.rowsPerPage,
      category3Id: category3Id.value!
    });
    if (res.code === 200) {
      spuList.value = res.data.records;
      pagination.value.rowsNumber = res.data.total;
    } else {
      throw new Error('获取SPU列表失败');
    }
  } catch (error: any) {
    $q.notify({
      type: 'negative',
      message: error.message,
      position: 'top'
    });
  } finally {
    loading.value = false;
  }
};
// 当前显示的card
type CardType = 'list' | 'spu' | 'sku';
const isShowCard = ref<CardType>('list');
// category是否只读
const readonly = computed(() => isShowCard.value !== 'list');
// 添加或修改spu
const spuId = ref<number>();
function showSpuForm(currentSpuId: number | undefined) {
  spuId.value = currentSpuId;
  isShowCard.value = 'spu';
}
// 隐藏spuForm
function hideSpuForm(flag?: string) {
  if (flag) {
    getSpuList();
  }
  isShowCard.value = 'list';
}
// SKUform
function showSkuForm(currentSpuId: number) {
  spuId.value = currentSpuId;
  isShowCard.value = 'sku';
}
function hideSkuForm(flag?: string) {
  if (flag) {
    // 重置列表中的spuId
    skuListDialog.value?.showSkuList(void 0);
  }
  isShowCard.value = 'list';
}
// SkuList
const skuListDialog = useCompRef(SkuListDialog);
// 删除指定spu
function deleteSpu(id: number) {
  useRemoveItem(reqDeleteSpu, id, '确认删除该SPU吗？', getSpuList);
}
</script>

<template>
  <div>
    <CategoryList @get-category="getCategoryId" :readonly="readonly" />
    <!-- Spu表格 -->
    <q-card class="q-mt-md" v-show="isShowCard === 'list'">
      <q-card-section>
        <authority permission="btn.Spu.add" #="{ hasPermission }">
          <q-btn
            label="添加SPU"
            icon="add"
            color="primary"
            :disabled="category3Id === undefined || !hasPermission"
            @click="showSpuForm(undefined)"
          ></q-btn>
        </authority>
      </q-card-section>
      <q-card-section>
        <my-q-table
          :data="spuList"
          :columns="columns"
          v-model:pagination="pagination"
          use-pagination
          @get-table-data="getPaginationInfo"
          :loading="loading"
        >
          <template #body-cell-control="props">
            <q-td class="flex items-center no-wrap q-gutter-xs">
              <authority permission="btn.Spu.addsku" #="{ hasPermission }">
                <hint-button
                  size="xs"
                  icon="add"
                  color="positive"
                  title="添加SKU"
                  @click="showSkuForm(props.row.id)"
                  :disabled="!hasPermission"
                ></hint-button>
              </authority>
              <authority permission="btn.Spu.update" #="{ hasPermission }">
                <hint-button
                  size="xs"
                  icon="edit"
                  color="secondary"
                  title="修改SPU"
                  @click="showSpuForm(props.row.id)"
                  :disabled="!hasPermission"
                ></hint-button>
              </authority>

              <authority permission="btn.Spu.skus" #="{ hasPermission }">
                <hint-button
                  size="xs"
                  icon="info"
                  color="info"
                  title="展示SKU"
                  @click="skuListDialog?.showSkuList(props.row.id)"
                  :disabled="!hasPermission"
                ></hint-button>
              </authority>

              <authority permission="btn.Spu.delete" #="{ hasPermission }">
                <hint-button
                  size="xs"
                  icon="delete"
                  color="negative"
                  title="删除SPU"
                  @click="deleteSpu(props.row.id)"
                  :disabled="!hasPermission"
                ></hint-button>
              </authority>
            </q-td>
          </template>
        </my-q-table>
      </q-card-section>
    </q-card>
    <!-- spuForm表单 -->
    <SpuFormCard
      :spuId="spuId"
      :category3Id="category3Id!"
      @hide-spu-form="hideSpuForm"
      v-if="isShowCard === 'spu'"
    />
    <!-- SKUform表单 -->
    <SkuFormCard
      :spuId="spuId!"
      :category="categoryId!"
      @hide-sku-form="hideSkuForm"
      v-if="isShowCard === 'sku'"
    />
    <!-- SKUlist表单 -->
    <SkuListDialog ref="skuListDialog" />
  </div>
</template>

<style scoped>
/* code... */
</style>
